<template>
    <header
        ref="headRef"
        :class="[
            bgWhiteColorBlackComp ? 'bgWhiteColorBlack' : '',
            $route.path === '/' ? 'fixed' : 'sticky',
            'header-wrapper flex items-center justify-between w-full',
        ]"
    >
        <div class="logo">
            <img :src="bgWhiteColorBlackComp ? logoB : logoH" />
        </div>
        <div class="right flex items-center">
            <div class="nav_list flex items-center">
                <div
                    v-for="item in data.navList"
                    :class="[
                        'nav_list--item relative cursor-pointer',
                        item.path === $route.matched[0].path ? 'active' : '',
                    ]"
                    @click.stop="onActivePath(item)"
                >
                    <div class="title">
                        {{
                            typeof item.title === "function"
                                ? item.title()
                                : item.title
                        }}
                    </div>
                    <div
                        class="children absolute cursor-pointer"
                        v-if="item.children"
                    >
                        <div
                            class="child"
                            v-for="(child, childIndex) in item.children"
                            @click.stop="
                                onActiveChildPath(item, child, childIndex)
                            "
                        >
                            {{
                                typeof child.title === "function"
                                    ? child.title()
                                    : child.title
                            }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="lang">
                <div class="label">{{ currentLang?.desc }}</div>
                <div class="langList">
                    <div
                        class="langItem"
                        v-for="lang in langList"
                        @click="langChangeHandle(lang.value)"
                    >
                        {{ lang.label }}
                    </div>
                </div>
            </div>
        </div>
    </header>
</template>

<script setup>
import { reactive, onMounted, onUnmounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import logoH from "/assets/image/logoH.png";
import logoB from "/assets/image/logoB.png";
const { setLocale, t, locale } = useI18n();
const route = useRoute();
const router = useRouter();
const headRef = ref(null);
const HomeHeadBgRef = ref(null);
const bgWhiteColorBlack = ref(false);
const data = reactive({
    navList: [
        {
            title: () => t("common.text1"),
            path: "/",
            key: "home",
        },
        {
            title: () => t("common.text2"),
            path: "/about",
            key: "about",
            children: [
                {
                    title: () => t("common.text3"),
                    key: "introduce",
                },
                {
                    title: () => t("common.text4"),
                    key: "advantage",
                },
                {
                    title: () => t("common.text5"),
                    key: "honor",
                },
                {
                    title: () => t("common.text6"),
                    key: "history",
                },
                {
                    title: () => t("common.text7"),
                    key: "global",
                },
            ],
        },
        {
            title: () => t("common.text8"),
            path: "/news",
            key: "news",
            children: [
                {
                    title: () => t("common.text9"),
                    path: "/news/group",
                    key: "group",
                },
                {
                    title: () => t("common.text10"),
                    path: "/news/industry",
                    key: "industry",
                },
                {
                    title: () => t("common.text11"),
                    path: "/news/brand",
                    key: "brand",
                },
            ],
        },
        {
            title: () => t("common.text12"),
            path: "/service",
            key: "service",
            children: [
                {
                    title: () => t("common.text13"),
                    path: "/service/fund",
                    key: "fund",
                },
                {
                    title: () => t("common.text14"),
                    path: "/service/externalAsset",
                    key: "externalAsset",
                },
                {
                    title: () => t("common.text15"),
                    path: "/service/familyTrust",
                    key: "familyTrust",
                },
                {
                    title: () => t("common.text16"),
                    path: "/service/investConsult",
                    key: "investConsult",
                },
            ],
        },
        {
            title: () => t("common.text17"),
            path: "/contact",
            key: "contact",
            children: [
                {
                    title: () => t("common.text18"),
                    path: "/contact/recruitment",
                    key: "recruitment",
                },
                {
                    title: () => t("common.text19"),
                    path: "/contact/contactUs",
                    key: "contactUs",
                },
            ],
        },
    ],
});
const langList = [
    { label: "English", value: "en", desc: "EN" },
    { label: "简体中文", value: "zh_cn", desc: "简体" },
    { label: "繁體中文", value: "zh_tw", desc: "繁体" },
];
const currentLang = computed(() => {
    return langList.find((item) => item.value === locale.value);
});

// 父级导航点击事件
const onActivePath = (item) => {
    if (!item.children) {
        router.push({
            path: item.path,
        });
    } else if (item.children && item.children[0].path) {
        router.push({
            path: item.children[0].path,
            query: { key: item.children[0].key },
        });
    } else if (
        item.children &&
        !item.children[0].path &&
        item.children[0].key
    ) {
        router.push({
            path: item.path,
            query: { key: item.children[0].key },
        });
    }
};
// 子级导航点击事件
const onActiveChildPath = (item, child) => {
    if (child.path) {
        router.push({ path: child.path, query: { key: child.key } });
    } else if (child.key) {
        router.push({ path: item.path, query: { key: child.key } });
    }
};

const langChangeHandle = (lang) => {
    setLocale(lang);
    localStorage.setItem("lang", lang);
    let dataLang = lang === "en" ? lang : "";
    document.cookie = `i18n_redirected=${lang};`;
    document.documentElement.setAttribute("data-lang", dataLang);
};

// 滚动条滚动或非首页展示header白底黑字
const bgWhiteColorBlackComp = computed(() => {
    return bgWhiteColorBlack.value || route.path !== "/";
});
const handleScroll = throttle(function () {
    if (route.name === "index") {
        if (window.scrollY < 380) {
            HomeHeadBgRef.value = true;
        } else {
            HomeHeadBgRef.value = false;
        }
    }
    if (window.scrollY >= 130) {
        bgWhiteColorBlack.value = true;
    } else {
        bgWhiteColorBlack.value = false;
    }
}, 200);
onMounted(() => {
    const lang = localStorage.getItem("lang");
    if (lang) {
        setLocale(lang);
    } else {
        setLocale("en");
    }
    document.documentElement.setAttribute("data-lang", lang || "");

    window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped>
.header-wrapper {
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 100px;
    padding: 0 6.6vw;
    transition: all 0.3s ease-in;

    &.bgWhiteColorBlack {
        color: #666;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .nav_list {
        &--item {
            margin: 0 18px;
            position: relative;
            height: 100px;
            display: flex;
            align-items: center;
            /* px-to-viewport-ignore-next-line */
            .title {
                &:hover {
                    color: var(--color-primary);
                }
            }
            .children {
                visibility: hidden;
                opacity: 0;
                transition: all 0.3s ease-in-out;
                background: rgba(255, 255, 255, 0.9);
                width: 150px;
                border-radius: 6px;
                z-index: 99;
                left: 50%;
                top: 85%;
                transform: translateX(-50%);
                color: #666;
                border-top: 3px solid #ffc600;

                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #ffc600;
                }

                .child {
                    font-size: 16px;
                    height: 48px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.2s ease-in-out;

                    &:hover {
                        color: #fff;
                        background-color: #ffc600;
                    }
                }
            }

            &:hover {
                .children {
                    visibility: visible;
                    opacity: 1;
                }
            }

            &.active {
                color: var(--color-primary);
            }
        }
    }

    .lang {
        position: relative;
        cursor: pointer;
        height: 100px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-left: 30px;

        .label {
            color: #fff;
            font-size: 16px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #ffc600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .langList {
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease-in-out;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: saturate(180%) blur(20px);
            width: 150px;
            border-radius: 6px;
            position: absolute;
            z-index: 99;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            color: #666;
            border-top: 3px solid #ffc600;

            &::before {
                content: "";
                display: block;
                position: absolute;
                top: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #ffc600;
            }

            .langItem {
                height: 48px;
                text-align: center;
                line-height: 48px;
                transition: all 0.2s ease-in-out;

                &:hover {
                    color: #fff;
                    background-color: #ffc600;
                }
            }
        }

        &:hover {
            .langList {
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

html[data-lang="en"] .header-wrapper .nav_list--item .children {
    width: 245px;
}

@media screen and (max-width: 1200px) {
    .header-wrapper {
        height: 80px;
    }
    .content-wrapper {
        margin-top: 80px;
    }
}
</style>
